<template>
  <div>
    <!-- type="border-card" -->
    <el-tabs v-model="activeName">
      <!-- <el-tab-pane :lazy="true" :name="TABSNAME.user" :label="TABSNAME.user">
        <UserVip></UserVip>
      </el-tab-pane> -->
      <el-tab-pane :lazy="true" :name="TABSNAME.vipUser" :label="TABSNAME.vipUser">
        <VipUser></VipUser>
      </el-tab-pane>
      <el-tab-pane :lazy="true" :name="TABSNAME.label" :label="TABSNAME.label">
        <VipLabel></VipLabel>
      </el-tab-pane>
      <el-tab-pane :lazy="true" :name="TABSNAME.vipGroup" :label="TABSNAME.vipGroup">
        <VipGroup></VipGroup>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import VipGroup from "./vipGroup.vue";
import VipLabel from "./vipLabel.vue";
import VipUser from "./vipUser.vue";

enum TABSNAME {
  user = "old用户配置",
  vipUser = "用户配置",
  label = "标签配置",
  vipGroup = "组别配置",
}

const router = useRouter()
const route = useRoute()
const store = useStore(Storekey)
const user = computed<Studycodemodel.Iuser>(() => {
  return store.getters.getuser;
});
const teamId = computed(() => {
  return user.value?.teamid
})

const activeName = ref(TABSNAME.vipUser)

</script>

<style scoped>
.router-link-active {
  color: cadetblue;
}
</style>